<template>
  <div id="my_summary">
    <Structure>
      <template v-slot:img>
        <img src alt />
      </template>

      <template v-slot:breadcrumb>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>学院概况</el-breadcrumb-item>
          <el-breadcrumb-item>{{ activeName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <template v-slot:bar>
        <div class="title">学院概况</div>
        <ul>
          <li
            @click="changeActiveIndex(index)"
            v-for="(item, index) in barList"
            :class="{ 'active': activeIndex === index }"
          >{{ item.text }}</li>
        </ul>
      </template>

      <template v-slot:right_centent>
        <nuxt-child />
      </template>
    </Structure>
  </div>
</template>

<script>
import Structure from "~/components/Structure";
export default {
  name: "my_summary",
  layout: "index",
  data() {
    return {
      activeIndex: 0,
      activeName: "学院简介",
      barList: [
        { path: "/my_summary", text: "学院简介" },
        { path: "/my_summary/page2", text: "现任领导" },
        { path: "/my_summary/page3", text: "组织机构" },
        { path: "/my_summary/page4", text: "联系方式" }
      ]
    };
  },
  components: {
    Structure
  },
  methods: {
    changeActiveIndex(index) {
      this.activeIndex = index;
      this.activeName = this.barList[index].text;
      this.$router.push(this.barList[index].path);
    }
  }
};
</script>

<style scoped lang="less">
ul {
  margin-top: 20px;
  li {
    padding: 5px 0 5px 20px;
    margin-bottom: 25px;
    font-size: 18px;
    cursor: pointer;
    &.active {
      background: linear-gradient(to right, #f3cf36, #fff);
    }
  }
}
</style>